<!--
    vue3：
      新建项目：npm create vue@latest 新建后 npm i添加插件  运行npm run dev
      定义变量：reactive：只能将引用类型的非响应式数据转成响应式数据
              ref：可以将非响应式数据转成响应式数据，只是使用时需要在后面.value
       在vue2中当数组或者对象中的数据发生改变时，视图层不会有反应
       所以便用到了this.$forceUpdate()方法：强制页面刷新 (vue3不会有这个问题)
       nextTick() 在下次DOM更新循环之后执行延迟回调，在修改数据之后立刻使用
          获取更新后的DOM
       计算属性：computed
           computed(()=>{}) 直接使用get
           computed({get(){},set(){}})
       监听属性：watch
          watch(监听的属性，回调函数(newVal，oldVal),{deep:深度监听，immediate：立即执行})
          监听多个：watch([监听的属性1,监听的属性2,()=>监听的属性3],
                  (如果监听属性使用reactive转换的要使用箭头函数返回其值)
                  回调函数(newVal，oldVal),{deep:深度监听，immediate：立即执行})
          watchEffect监听所有响应式数据，直接使用即可 (是立即执行)
-->
<template>
  <div class="about">
    <h1>This is an about page {{name}}</h1>
      <p>{{age}}</p>
      <button @click="addAge">增加</button>
      <p>{{arr}}</p>
      <button @click="setArr">修改数组</button>
      <p>{{obj}}</p>
      <button @click="setObj">修改对象</button>
      <p>{{arrRef}}</p>
      <button @click="setArr_ref">修改用ref转换的数组</button>
  </div>
  <!--数据监听-->
  <div>
      性: <input type="text" v-model="headName">
      名: <input type="text" v-model="endName">
      性名: <input type="text" v-model="fillName">
  </div>
  <!-- 跑马灯-->
  <marqueeCom></marqueeCom>
</template>

<script setup>
import MarqueeCom from "@/components/marqueeCom.vue";
import {computed, reactive, ref, watch, watchEffect} from "vue";

let name = ref('vue3')
// 年龄
let age = ref(18)
function addAge () {
    age.value++
}

// 使用reactive定义
let arr = reactive([1,2,3,4,5])
function setArr () {
    arr[0] = 6
}

let obj = reactive({name: 'zs',age: 19})
function setObj () {
    obj.name = 'ls'
}

// 修改用ref转换的引用类型
let arrRef = ref([1,2,3,4,5])
function setArr_ref() {
    arrRef.value[0] = 6
}

// 使用computed计算监听
let headName = ref('')
let endName = ref('')
let fillName = ref('')
// let fillName = computed(()=> {
//     return headName.value + endName.value
// })
// let fillName = computed({
//     get() {
//         return headName.value + endName.value
//     },
//     set(val) {
//         console.log(val)
//     }
// })
// 使用watch监听
// watch([headName,endName], (newVal, oldVal)=> {
//     console.log(newVal, oldVal)
// })
watchEffect(()=>{
    console.log(headName.value)
    console.log(endName.value)
})
</script>


